<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/banner.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/product_list.css">
</head>
<body>
    <!--这是导航栏区域开始 -->
      <!-- 这是 nav的上面区域 -->
      <div class="nav_top">
        <div class="nav_top_div wrapper">
            <span class="f1">欢迎来到HOUSE家居网！</span>
            <div class="fr nav_top_div_1">
                <i ></i>
                <span>400-00-000xxx </span>
                <i ></i>
                <span> 1234567xxx@gmail.com</span>
            </div>
        </div>
 </div>
 <!-- 这是nav的下面区域 -->
 <div class="nav_bottom">
  <div class="nav_bottom_div wrapper clearfix ">
  <h1 class="f1 clearfix"><img src="./images/logo.png" alt="加载失败" class="f1"></h1>
  <ul class="clearfix">
      <li><a href="">首页</a></li>
      <li><a href="">关于我们</a></li>
      <li><a href="">产品展示</a></li>
      <li><a href="">新闻动态</a></li>
      <li><a href="">在线留言</a></li>
      <li><a href="">联系我们</a></li>
      
  </ul>
</div>

</div>
 <!-- 这是导航栏区域结束 -->
 <!-- 这是banner区域开始 -->
 <div class="banner" style="background-image:url(./images/banner5.jpg);height:310px">
   
</div>
<!-- 这是banner区域结束 -->

<!-- 这是产品展示的区域开始 -->
   <div class="product_display"> 
       <!-- 这是产品展示的上面 -->
       <div class="big_border">

       
       <div class="wrapper product_display_div1">
           <span>
               首页&gt;&gt;
               <a href="#">关于我们</a>
           </span>
           
       </div>
    </div>
     <!-- 这是产品展示的下面 -->
     <div class="wrapper product_display_div2  clearfix">
         <h2 class="font_size">产品展示</h2>
         <div class="product_display_div2_content1 f1">
           <ul class="product_display_div2_content1_ul1">
               <li>床上用品</li>
               <li>家居装饰</li>
               <li>居家日用</li>
               <li>家具收纳</li>
               <li>厨房收纳</li>
               <li>厨房餐饮</li>
           </ul>
           <img src="./images/02_wqpl.jpg" alt="">
         </div>

         <div class="product_display_div2_content2 fr">
             <ul class="product_display_div2_content2_ul2">
                 <li>
                     <img src="./images/pro1.png" alt="你好">
                     <p>实木照片墙 创意绿色小鸟墙贴</p>
                     <p>￥400.00</p>
                 </li>
                 <li>
                    <img src="./images/pro2.png" alt="你好">
                    <p> 全悦18框实木照片墙创意相片墙</p>
                    <p>￥189.00</p>
                </li>
                <li>
                    <img src="./images/pro3.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
                <li>
                    <img src="./images/pro5.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>

                <li>
                    <img src="./images/pro6.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
                <li>
                    <img src="./images/pro7.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
                <li>
                    <img src="./images/pro8.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
                <li>
                    <img src="./images/pro1.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
                <li>
                    <img src="./images/pro1.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
                <li>
                    <img src="./images/pro1.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
                <li>
                    <img src="./images/pro1.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
                <li>
                    <img src="./images/pro1.png" alt="你好">
                    <p> 地中海客厅实木照片墙现代简约</p>
                    <p>￥1500.00</p>
                </li>
             </ul>
       <h6>共六十条记录
           <a href="">1</a>
           <a href="">2</a>
           <a href="">3</a>
           <a href="">4</a>
           <a href="">5</a>
           <a href="./Product List Details.html">下一页&gt;</a>
           <a href="">末页</a>
       </h6>
         </div>
         
        
       
     </div>
        




  

   </div>
<!-- 这是产品展示区域的结束 -->
   <!-- 这是footer区域开始 -->

   <div class="footer">
    <div class="wrapper  clearfix">
        <div class="footer_div1 f1">
            <P><img src="./images/logo2.jpg" alt=""></P>
            <p><i></i>
              中国上海市xxx区xxx路12号moumou大厦5层5xx室</p>
            <p><i></i>
              400-000-xxxx   /  (021)-1234578xxx
          </p>
            <p><i></i>
              12385963xxxx@gmail.com
          </p>
       </div>

        <div class="footer_div2  f1 ">
            <h2>快速链接</h2>
            <ul>
            <li class="f1">&gt;网站首页  </li>
            <li class="fr">&gt;关于我们  </li>
            <li class="f1">&gt;产品展示</li>
            <li class="fr">&gt;新闻动态</li>
            <li class="f1">&gt;在线留言 </li>
            <li class="fr">&gt;联系我们</li>
          </ul>
        </div>
        <div class="footer_div3 f1" >
            <h2>站内搜索</h2>
            <form action="#" method="GET" class="clearfix">
                <input type="text " class="f1" placeholder="请输入关键词"> <button class="f1">登录</button>
                
            </form>
            <p>关注我们<i></i><i></i></p>
        </div>
       
    </div>
    <p> Copyright &copy; 2009-2011,www.xxxxxx.com,All rights reserved  沪ICP备XXXXXX号 未经同意，不得转载</p>
</div>
  <!-- 这是footer区域结束 -->
</body>
</html>